<template>
  <div class="pastdueOrders">
    <div class="title">
      <div>
        <span>订单数(单)：</span>
        <span>{{orderNumber}}</span>
      </div>
      <div>
        <span>订单金额(元)：</span>
        <span>{{parseFloat(orderMoney).toLocaleString()}}</span>
      </div>
    </div>
    <div class="selectBox">
      <el-select class="payType" v-model="params.status" placeholder="过期类型">
        <el-option
          v-for="item in optionsStatus"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select class="payType" v-model="params.payType" placeholder="支付方式">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-date-picker
        class="piker"
        v-model="value5"
        type="daterange"
        align="right"
        @change='changeDatePicker()'
        unlink-panels
        range-separator="至"
        value-format="timestamp"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions2">
      </el-date-picker>
      <!-- <el-date-picker
        class="piker"
        @change='changeDatePicker()'
        v-model="value5"
        type="datetimerange"
        :picker-options="pickerOptions2"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      ></el-date-picker> -->

      <!-- <el-select v-model="orderNumberValue" placeholder="订单号">
        <el-option
          v-for="item in orderNumber"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select> -->
      <div class="search">
        <div>
          <el-input class="input" size="medium" placeholder="请输入内容" v-model="params.keyword"></el-input>
          <el-button @click='searchOrderList' type="primary">搜索</el-button>
        </div>
      </div>
    </div>
    <div class="content">
      <table>
        <thead>
          <tr>
            <th>用户</th>
            <th>项目信息</th>
            <th>收货信息</th>
            <th>支付方式</th>
            <th>快递信息</th>
            <th>订单金额</th>
          </tr>
        </thead>

        <tbody v-for='(item,index) in list' :key='index'>
          <tr class="sep-row">
            <td colspan="5"></td>
          </tr>
          <tr class="tr-th">
            <td colspan="10">
              <div class="thead">
                <div>
                  <span>
                    创建时间：
                    <b>{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</b>
                  </span>
                  <span>
                    订单号：
                    <b>{{item.orderNumber}}</b>
                  </span>
                </div>
                <div class="selectOperation">
                  <!-- 过期 -->
                  <div v-if="item.orderStatus.value === 'expired'" class="orderfailure">
                    <span>{{getOrderStatus(item)}}</span>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="imgBox">
                <img
                   :src="item.userAvatar ? item.userAvatar : defaultImg"
                  alt
                >
              </div>
              <p>{{item.userName}}</p>
            </td>

            <td>
              <div class="information">
                <div>
                  <img
                    :src="item.movieCoverImage"
                    alt
                  >
                </div>
                <div class="title">
                  <ul>
                    <li>{{item.movieName}}</li>
                    <li>{{getmovieReleaseStatus(item)}}</li>
                  </ul>
                </div>
                <div class="money">
                  <ul>
                    <li>{{getShowDeciemal(item.priceOfUnit)}}</li>
                    <li>×{{item.number}}</li>
                  </ul>
                </div>
              </div>
            </td>
            <td class="receipt">
              <ul>
                <li>{{item.expressName}}</li>
                <li>{{item.expressMobile}}</li>
                <li>{{item.expressAddress}}</li>
              </ul>
            </td>
            <td>
              <p>{{getPayType(item)}}</p>
            </td>
            <td>
              <span v-if="!item.expressCompanyName && !item.expressCompanyNumber && item.orderStatus.value === 'paid'" 
                @click='fillExpress(item.orderId)' class='link-type'>填写快递</span>
              <h3 v-if="item.expressCompanyName">{{item.expressCompanyName}}</h3>
              <p v-if="item.expressCompanyNumber">{{item.expressCompanyNumber}}</p>
            </td>
            <td>
              <h3>{{getMoney(item)}}</h3>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 确认尾款 -->
      <orderTailConfirm ref='orderTailConfirm'></orderTailConfirm>

      <!-- 查看凭证消息 -->
      <credential ref='credential'></credential>
      <el-pagination
        class="pagination"
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>


<script>
import { ajax } from "@/api";
import { parseTime } from '@/utils';
import numberFormat from '@/api/numberFormat';
import { getToken } from "@/utils/auth";
import credential from './components/credential';
import orderTailConfirm from './components/orderTailConfirm';
export default {
  name: "pastdueOrders",
  data() {
    return {
      defaultImg:'http://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png',
      orderNumber:0,
      orderMoney:0,
      confirmationStatus: false,
      orderfailureStatus: false,
      value5: "",
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      total:0,
      options: vars.payType,
      value: "",
      orderNumberValue: "",
      params:{
        orderType:'movie',
        payType:'',
        unionId:'',
        status:'expired',  //默认过期未支付
        startTime:'',
        endTime:'',
        orderNumber:'',
        keyword:'',
        start:0,
        limit:10,
        token:getToken()
      },
      optionsStatus:[{
        text:'超期未支付',
        value:'expired'
      },{
        text:'超期未付尾款',
        value:'expiredTailConfirm'
      }],
      list:[],
      time:''
    };
  },
  methods:{
    getOrderStatus(data){
      return data.orderStatus.text;
    },
    //失效时间
    getcountdown(item) {
      //将得到的createTime + vars.tailConfirmHour 得到 过期时间
      let resultTime, hour, min, sec,timeNumber;
      let tailConfirmHourTime = (vars.tailConfirmHour*60) + item.createTime;
      let currentTimeStamp = Math.round(new Date().getTime() / 1000);
      resultTime = tailConfirmHourTime - currentTimeStamp;
      hour = Math.floor(resultTime / 3600);
      min = Math.floor((resultTime % 3600) / 60);
      sec = Math.floor(resultTime % 60);

      if (hour < 10) {
        hour = "0" + hour;
      }

      if (min < 10) {
        min = "0" + min;
      }

      if (sec < 10) {
        sec = "0" + sec;
      }
      timeNumber = hour + "小时" + min + "分" + sec + '秒';

      if (
        this.countdownTime === "00小时00分00秒" ||
        this.countdownTime < "00小时00分00秒"
      ) {
        clearInterval(this.time);
      }
      return timeNumber; 
    },

    setIntervalTime(){
      this.time  = setInterval(() => {
          for(let i = 0;i < this.list.length;i++){
            this.list[i].createTime = this.list[i].createTime - 0.0001;
          }
      },1000);
    },

    changeDatePicker(){
      console.log(this.value5);
    },
    //搜索
    searchOrderList(){
        if(this.value5 !== ''){
          this.params.startTime = this.value5[0]/1000;
          this.params.endTime = this.value5[1]/1000;
        }

        if(this.params.status === '' && 
           this.params.payType === '' && 
           this.params.startTime === '' && 
           this.params.endTime === '' && 
           this.params.keyword === ''){
             return this.$message.error('搜索内容不能为空');
           }
        this.getData();
    },
    //订单管理列表 -- 权益已发放
    getData(){
      ajax('ordersForManager',this.params).then((res) => {
        if(res.data.status){
          this.list = res.data.data;
          this.total = res.data.total;
          //订单数
          this.orderNumber = res.data.total;
          //订单金额
          this.orderMoney = this.getShowDeciemal(res.data.totalMoney);
          for(let i = 0;i < this.list.length;i++){
            if(this.list[i].orderStatus.value === 'tailConfirm'){
              this.setIntervalTime();
            }
          }
        }
      });
    },
    handleCurrentChange(val){
        this.params.start = (val - 1) * this.params.limit;
        this.getData();
    },
    getPayType(item){
      if(item.deposit > 0){
        return '线下支付（定金'+numberFormat.showDecimal(item.deposit)+'元）';
      }else{
        return item.payType.text;
      }
    },
    getmovieReleaseStatus(item){
      return item.movieReleaseStatus.text;
    },
    getShowDeciemal(money){
      return numberFormat.showDecimal(money);
    },
    //订单金额
    getMoney(item){
      return this.getShowDeciemal(item.priceOfUnit)*item.number;
    }
  },
  components:{
    credential,
    orderTailConfirm
  },
  mounted(){
    this.getData();
  }
};
</script>


<style lang="less" scoped>
.pastdueOrders {
  padding: 1rem;
  .title {
    display: flex;
    padding: 0.8rem 0;
    border-bottom: 1px solid #e7e7e7;
    div {
      display: flex;
      span {
        font-size: 15px;
      }
    }
    div:first-child {
      margin-right: 1rem;
      span:last-child {
        color: #04affd;
      }
    }
    div:last-child {
      span:last-child {
        color: #04affd;
      }
    }
  }
  .selectBox {
    display: flex;
    margin: 1rem 0;
    .piker {
      margin: 0 2rem;
    }
    .search {
      display: flex;
      div:first-child {
        display: flex;
      }
      .input {
        margin: 0 0.4rem 0 0.3rem;
      }
    }
  }

  table {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
    thead {
      th {
        /* height: 32px;
                line-height: 32px; */
        text-align: left;
        background: #f8f8f8;
        color: #666;
        font-size: 15px;
        font-weight: 400;
        padding: 1rem;
      }
      th:first-child {
        width: 10%;
      }
      th:nth-child(2) {
        width: 30%;
      }
      th:nth-child(3) {
        width: 21%;
      }
      th:nth-child(4) {
        width: 7%;
      }
    }
    tbody {
      .information {
        display: flex;
        div {
          display: flex;
          align-items: center;
          width: 90px;
          height: 133px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
          ul {
            line-height: 2rem;
          }
        }
        .title {
          margin-left: 1rem;
          border: none;
          width: 60%;
          ul{
            li:first-child{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            li{
               font-size: 15px;
            }
          }
        }
        .money {
          ul {
            width: 100%;
            li {
              text-align: right;
               font-size: 15px;
            }
            li:first-child {
              color: #ff1268;
            }
          }
        }
      }
      tr:nth-child(2){
        td{
          padding: 0 1rem;
          border: 1px solid #e6e6e6;
        }
      }
      
      tr:nth-child(3) {
        td {
          padding: 1rem;
          border: 1px solid #e6e6e6;
          li {
              font-size: 15px;
          }
        }
      }

      tr:nth-child(3) {
        td:first-child {
          .imgBox {
            width: 50px;
            height: 50px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50px;
            }
          }
          p:last-child {
            display: inline-block;
            color: #36aaf5;
            a:last-child {
              margin-left: 1rem;
            }
          }
          p {
            margin: 0.8rem 0 0.3rem 0;
            font-size: 15px;
          }
        }
        .receipt{
          ul{
            line-height: 1.8rem;
          }
          h3 {
            font-weight: 400;
            color: rgba(16, 16, 16, 1);
            font-size: 15px;
            margin: 0;
          }
          p {
            color: rgba(170, 170, 170, 1);
            font-size: 14px;
            margin: 0.3rem 0 0 0;
          }
        }
        td:nth-child(4) {
          h3 {
            font-weight: 400;
            color: rgba(255, 18, 104, 1);
            font-size: 15px;
            margin: 0 0 0.3rem 0;
            b {
              color: #aaa;
              font-weight: 400;
            }
          }

          a {
            color: rgba(4, 146, 251, 1);
            font-size: 14px;
            text-decoration: underline;
          }
        }
        td:nth-child(5) {
          h3 {
            font-weight: 400;
            font-size: 15px;
            margin: 0 0 0.3rem 0;
          }
          p {
            font-size: 14px;
            color: rgba(4, 146, 251, 1);
            margin: 0;
          }
        }
        td:nth-child(6) {
          h3 {
            font-weight: 400;
            color: #ff1268;
            font-size: 15px;
            margin: 0 0 0.3rem 0;
            b {
              color: rgba(255, 18, 104, 1);
              font-weight: 400;
            }
          }

          a {
            color: rgba(4, 146, 251, 1);
            font-size: 14px;
            text-decoration: underline;
          }
        }

        td:nth-child(7) {
          h3 {
            font-weight: 400;
            color: #101010;
            font-size: 15px;
            margin: 0 0 0.3rem 0;
          }
          a {
            color: #0492fb;
            font-size: 14px;
            text-decoration: underline;
          }
        }
        td {
          a {
            color: #0492fb;
            font-size: 14px;
            text-decoration: underline;
          }
        }
        p,span{
          font-size: 15px;
        }
      }

      .sep-row {
        height: 20px;
      }
      .thead {
        display: flex;
        justify-content: space-between;
        div {
          line-height: 36px;
          font-size: 14px;
          display: flex;
          div:first-child {
            margin-right: 2rem;
          }
        }
        span {
          color: #36aaf5;
        }
        span:last-child {
          margin-left: 2rem;
        }
        b {
          font-weight: 400;
          color: #7d7d7d;
        }

        .selectOperation {
          /* width: 7rem; */
          cursor: pointer;
          .confirmation {
            display: flex;
            div:first-child {
              span {
                color: #36aaf5;
              }
            }
            div:last-child {
              span {
                color: #f90101;
                margin: 0;
              }
            }
          }
          .orderfailure {
            span {
              color: #f90101;
              margin: 0;
            }
          }
          .view {
            margin: 0;
            span {
              color: #36aaf5;
              margin: 0;
            }
          }
        }
      }
    }
  }
  .pagination{
    text-align: right;
    margin: 1rem 0;
  }

}
</style>
